---
title: Guidelines
redirect_from:
  - /components/textarea/
---

import InputBackgroundLinkSnippet from "snippets/input-background-link.mdx";
import InputHelpErrorSnippet from "snippets/input-help-error.mdx";
import InputLabelsSnippet from "snippets/input-labels.mdx";
import InputPlaceholderSnippet from "snippets/input-placeholder.mdx";

<ReactExample exampleId="Textarea-default" />

## When to use

- To collect longer answers from users.
- To gather detailed information with guidance on what to enter.

## When not to use

- For short and simple user input---use an [input field](/components/input/inputfield/).
- For longer responses that users can upload---use an [input file](/components/input/inputfile/).

## Component status

<ComponentStatus component="Textarea" />

## Content structure

![Label: provides a clear description of what users should fill in; placeholder: provides additional help for expected value; rows: optionally defines textarea height.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:171%3A1252)

## Content

<InputLabelsSnippet />

<InputHelpErrorSnippet />

<!-- eslint-disable -->

#### Error and Help messages

<!-- eslint-enable -->

<ReactExample exampleId="Textarea-states" />

<InputPlaceholderSnippet />

## Look & feel

<InputBackgroundLinkSnippet />
